<template>
  <div id="dashboard">
    <el-row :gutter="10">
      <el-col
        :xs="24"
        :sm="24"
        :md="12"
        :lg="6"
        :xl="6"
        v-for="(item, index) in saleInfo"
        :key="index"
      >
        <div class="grid-content" :style="{ background: item.color }">
          <div class="center">
            <p v-text="item.title" />
            <!-- 使用组件 val -->
            <countTo :endVal="item.val" />
          </div>
        </div>
      </el-col>
    </el-row>

    <div class="chart-box">
      <!-- <div id="chart1" v-if="true" /> -->
      <GChart :options="chartData" />
    </div>
    <div class="chart-box">
      <GChart :options="chartData2" />
    </div>
  </div>
</template>

<script>
import countTo from 'vue-count-to'
// import * as echarts from "echarts";
export default {
  data() {
    return {
      chartData: {},
      chartData2: {},
      saleInfo: [
        { val: 13594, title: '最高可借金额', color: '#67ca3a' },
        { val: 9833, title: '回报率', color: '#ff6600' },
        { val: 8888, title: '业绩领跑', color: '#f56c6c' },
        { val: 6666, title: '安稳底薪战队', color: '#409eff' },
      ],
    }
  },
  created() {
    // this.$nextTick(() => {
    // this.chart1 = echarts.init(document.querySelector("#chart1"));
    const options = {
      title: {
        text: 'Stacked Line',
      },
      tooltip: {
        trigger: 'axis',
      },
      legend: {
        data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      toolbox: {
        feature: {
          saveAsImage: {},
        },
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          name: 'Email',
          type: 'line',
          stack: 'Total',
          data: [120, 132, 101, 134, 90, 230, 210],
        },
        {
          name: 'Union Ads',
          type: 'line',
          stack: 'Total',
          data: [220, 182, 191, 234, 290, 330, 310],
        },
        {
          name: 'Video Ads',
          type: 'line',
          stack: 'Total',
          data: [150, 232, 201, 154, 190, 330, 410],
        },
        {
          name: 'Direct',
          type: 'line',
          stack: 'Total',
          data: [320, 332, 301, 334, 390, 330, 320],
        },
        {
          name: 'Search Engine',
          type: 'line',
          stack: 'Total',
          data: [820, 932, 901, 934, 1290, 1330, 1320],
        },
      ],
    }
    this.timer = setInterval(() => {
      console.log('用户...')
      let arr = [120, 132, 101, 134, 90, 230, 210]
      this.chartData.series.forEach((s) => {
        s.data = arr.map((num) => {
          return parseInt(1000 * Math.random())
        })
      })
    }, 2000)
    this.chartData = options
    // this.chart1.setOption(option);
    // });
    this.chartData2 = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 260],
          type: 'line',
        },
      ],
    }
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  components: { countTo },
}
</script>

<style lang="scss" scoped>
.grid-content {
  color: #6a7985;
  height: 200px;
  background: yellowgreen;
  position: relative;

  > div {
    color: #fff;
    font-weight: bold;

    > p {
      color: black;
      margin-bottom: 20px;
    }
  }
}
.chart-box {
  width: 100%;
  // width: 500px;
  height: 300px;
}
// #chart1 {
//   height: 500px;
//   width: 500px;
// }
</style>
